<template>
  <div class="room-column-detail">
    <Modal
      class="hide-zindex-model"
      v-model="modal1"
      :mask-closable="false"
      :title="
        itemData.id
          ? $t('views.roomColumn.table1Text100')
          : $t('views.roomColumn.table1Text98')
      "
    >
      <div class="box_all clear">
        <div class="box_title fl">
          {{ $t("views.systemMessage.table1Text2") }}:
        </div>
        <div class="box_content fl">
          <Input v-model="detail.title" />
        </div>
      </div>
      <div class="box_all clear">
        <div class="box_title fl">{{ $t("views.pageAd.upArea") }}:</div>
        <div class="box_content fl">
          <!--<Input v-model="detail.country_name"/>-->
          <i-select v-model="detail.region" filterable>
            <i-option
                v-for="(item, index) in $interfaceRegional({ noList: [98] })"
                :value="item.id"
                :key="index"
            >{{ item.text }}</i-option
            >
          </i-select>
        </div>
      </div>

   

      <div class="box_all clear">
        <div class="box_title fl">
          <p>{{ $t("views.roomColumn.table1Text12") }}:</p>
          <p>(690*230)</p>
        </div>
        <div class="box_content fl">
          <label>
            <div class="select_img" @click="sure_index = 1">
              {{ $t("views.public.chooseImg") }}
            </div>
            <div v-show="false">
              <input accept="image/*" type="file" @change="uploadImg($event)" />
            </div>
          </label>
          <div class="img_box">
            <div class="imgBox">
              <img :src="detail.avatar" alt="" />
            </div>
            <div>
              <Button type="error" @click="detail.avatar = ''" size="small">{{
                $t("views.public.clear")
              }}</Button>
            </div>
          </div>
        </div>
      </div>

      <div class="box_all clear">
        <div class="box_title fl">
          <p>{{ $t("views.roomColumn.table1Text34") }}:</p>
          <p>(750*500)</p>
        </div>
        <div class="box_content fl">
          <label>
            <div class="select_img" @click="sure_index = 2">
              {{ $t("views.public.chooseImg") }}
            </div>
            <div v-show="false">
              <input accept="image/*" type="file" @change="uploadImg($event)" />
            </div>
          </label>
          <div class="img_box">
            <div class="imgBox">
              <img :src="detail.avatar_inner" alt="" />
            </div>
            <div>
              <Button
                type="error"
                @click="detail.avatar_inner = ''"
                size="small"
                >{{ $t("views.public.clear") }}</Button
              >
            </div>
          </div>
        </div>
      </div>

      <!--<div class="box_all clear">-->
      <!--<div class="box_title fl">{{ $t('views.roomColumn.table1Text35') }}:</div>-->
      <!--<div class="box_content fl">-->
      <!--&lt;!&ndash;&ndash;&gt;-->
      <!--<i-select slot="selectIpt" style="width: 200px;margin: 0 5px;" v-model="detail.type" size="small"-->
      <!--:placeholder="$t('views.public.pleaseChoose')">-->
      <!--<i-option v-for="(item, countryIndex) in getJumpType()" :value="item.value" :key="countryIndex">{{-->
      <!--item.label }}-->
      <!--</i-option>-->
      <!--</i-select>-->
      <!--</div>-->
      <!--</div>-->

      <div class="box_all clear">
        <div class="box_title fl">
          {{ $t("views.roomColumn.table2Text11") }}:
        </div>
        <div class="box_content fl">
          <!---->
          <i-select
            slot="selectIpt"
            style="width: 200px; margin: 0 5px"
            v-model="detail.active_type"
            :placeholder="$t('views.public.pleaseChoose')"
          >
            <i-option
              v-for="(item, countryIndex) in getActiveType()"
              :value="item.value"
              :key="countryIndex"
              >{{ item.label }}
            </i-option>
          </i-select>
        </div>
      </div>

      <!--<div class="box_all clear">-->
      <!--<div class="box_title fl">{{ $t('views.roomColumn.table1Text84') }}:</div>-->
      <!--<div class="box_content fl">-->
      <!--<Input v-model="detail.jump_url" :placeholder="$t('views.roomColumn.table1Text84')"/>-->
      <!--</div>-->
      <!--</div>-->

      <!--<div class="box_all clear">-->
      <!--<div class="box_title fl">{{ $t('views.roomColumn.table1Text85') }}:</div>-->
      <!--<div class="box_content fl">-->
      <!--<Input v-model="detail.bind_id" :placeholder="$t('views.roomColumn.table1Text85')"/>-->
      <!--</div>-->
      <!--</div>-->

      <div class="box_all clear">
        <div class="box_title fl">
          {{ $t("views.roomColumn.table1Text1") }}:
        </div>
        <div class="box_content fl">
          <Input
            v-model="detail.sort"
            :placeholder="$t('views.roomColumn.table1Text1')"
          />
        </div>
      </div>

      <div class="box_all clear">
        <div class="box_title fl">
          {{ $t("views.roomColumn.table1Text86") }}:
        </div>
        <div class="box_content fl">
          <!---->
          <i-select
            slot="selectIpt"
            style="width: 200px; margin: 0 5px"
            v-model="detail.is_apply"
            size="small"
            :placeholder="$t('views.public.pleaseChoose')"
          >
            <i-option
              v-for="(item, countryIndex) in getApply()"
              :value="item.value"
              :key="countryIndex"
              >{{ item.label }}
            </i-option>
          </i-select>
        </div>
      </div>

      <!--内图-->

      <div class="box_all clear">
        <div class="box_title fl">
          {{ $t("views.roomColumn.table2Text13") }}:
        </div>
        <div class="box_content fl">
          <!---->
          <i-select
            slot="selectIpt"
            style="width: 200px; margin: 0 5px"
            v-model="detail.avatar_inner_type"
            size="small"
            :placeholder="$t('views.public.pleaseChoose')"
          >
            <i-option
              v-for="(item, countryIndex) in getInnerType()"
              :value="item.value"
              :key="countryIndex"
              >{{ item.label }}
            </i-option>
          </i-select>
        </div>
      </div>

      <div class="box_all clear" v-show="detail.avatar_inner_type == 1">
        <div class="box_title fl">
          {{ getInnerType(detail.avatar_inner_type) }}:
        </div>
        <div class="box_content fl">
          <Input
            v-model="detail.avatar_inner_url"
            :placeholder="getInnerType(detail.avatar_inner_type)"
          />
        </div>
      </div>

      <div class="box_all clear" v-show="detail.avatar_inner_type != 1">
        <div class="box_title fl">
          {{ getInnerType(detail.avatar_inner_type) }}:
        </div>
        <div class="box_content fl">
          <Input
            v-model="detail.avatar_inner_id"
            :placeholder="getInnerType(detail.avatar_inner_type)"
          />
        </div>
      </div>
      <!--内图-->
      <div class="box_all clear">
        <div class="box_title fl">
          {{ $t("views.roomColumn.table1Text21") }}:
        </div>
        <div class="box_content fl">
          <Date-picker
            :editable="false"
            type="datetime"
            v-model="start_time"
            @on-change="set_startTime"
          ></Date-picker>
        </div>
      </div>
      <div class="box_all clear">
        <div class="box_title fl">
          {{ $t("views.roomColumn.table1Text22") }}:
        </div>
        <div class="box_content fl dis-flex align-center">
          <Date-picker
            :editable="false"
            type="datetime"
            v-model="end_time"
            @on-change="set_endTime"
          ></Date-picker>
        </div>
      </div>

      <div slot="footer">
        <Button @click="modal1 = false" type="text">{{
          $t("views.public.cancel")
        }}</Button>
        <Button @click="bannerApplicationSave()" type="primary">{{
          $t("views.public.sure")
        }}</Button>
        <Button @click="bannerApplicationSave('newAdd')" type="primary"
          >{{ $t("views.roomColumn.table1Text47") }}
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { mapMutations, mapActions, mapGetters } from "vuex";

import until from "@/js/until.js";

export default {
  name: "foundDetail.vue",
  props: {
    value: {},
    itemData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {
  },
  data() {
    return {
      isAll: false,
      country_ids: [],
      showPassword: false,
      isfamily: true,
      iswealth: true,
      ischarm: true,
      sure_index: 0,
      isAbled: true,
      isLevel: true,
      modal1: true,
      jumpType: this.getJumpType(),
      detail: {
        region: 0,
        country_name: "",
        room_number: "",
        user_no: "",
        activity_name: "",
        start_time: "",
        total_time: "",
        describe: "",
        account_name: "",
        avatar: "",
        avatar_inner: "",
        country: "",
        type: 3,
        avatar_inner_type: 1,
      },
      tags: [
        { id: "0", title: this.$i18n.t("views.public.no") },
        { id: "1", title: this.$i18n.t("views.public.yes") },
      ],
      level: "",
      background_time: "",
      saveparameter: [],
      room_number: "",
      country: 0,
      start_time: this.setAddTime(),
      end_time: this.setEndTime(),
      end_day_time: "23:59:59",
      start_day_time: "00:00:00",
    };
  },
  created() {
    if (this.itemData.id) {
      this.detail = this.$copyMsg(this.itemData);

      this.start_time = until.timestampToTime(this.detail.start_time || "");
      this.end_time = until.timestampToTime(this.detail.end_time || "");
      this.start_day_time = until.toHHmmss(this.detail.start_day_time || "");
      this.end_day_time = until.toHHmmss(this.detail.end_day_time || "");
      // this.start_time = until.timestampToTime(this.detail.start_time);
      this.country_ids = this.detail.country_ids || [];
      this.detail.avatar_inner_type = this.detail.avatar_inner_type || 1;
    }
  },
  methods: {
    setAddTime() {
      var curTime = new Date();
      var addMinute = new Date(curTime.setMinutes(curTime.getMinutes() + 1));

      return addMinute;
    },

    setEndTime() {
      var addHour = new Date(
        this.setAddTime().setHours(this.setAddTime().getHours() + 24)
      );
      return addHour;
    },
    ...mapMutations(["changeGiving"]),
    set_starTime(date) {
      this.detail.start_time = date;
    },
    getApply() {
      return [
        {
          value: 1,
          label: this.$i18n.t("views.public.yes"),
        },
        {
          value: 2,
          label: this.$i18n.t("views.public.no"),
        },
      ];
    },

    getActiveType() {
      return [
        {
          value: 1,
          label: this.$i18n.t("views.roomColumn.table2Text1"),
        },
        {
          value: 2,
          label: this.$i18n.t("views.roomColumn.table2Text2"),
        },
        {
          value: 3,
          label: this.$i18n.t("views.roomColumn.table2Text3"),
        },
        {
          value: 4,
          label: this.$i18n.t("views.roomColumn.table2Text4"),
        },
        {
          value: 5,
          label: this.$i18n.t("views.roomColumn.table2Text5"),
        },
        {
          value: 6,
          label: this.$i18n.t("views.roomColumn.table2Text6"),
        },
        {
          value: 7,
          label: this.$i18n.t("views.roomColumn.table2Text7"),
        },
        {
          value: 8,
          label: this.$i18n.t("views.roomColumn.table2Text8"),
        },
        {
          value: 9,
          label: this.$i18n.t("views.roomColumn.table2Text9"),
        },
        {
          value: 10,
          label: this.$i18n.t("views.roomColumn.table2Text10"),
        },

        {
          value: 11,
          label: this.$i18n.t("views.roomColumn.table2Text16"),
        },

        {
          value: 12,
          label: this.$i18n.t("views.roomColumn.table2Text17"),
        },
        {
          value: 13,
          label: this.$i18n.t("views.roomColumn.table2Text18"),
        },
        {
          value: 14,
          label: this.$i18n.t("views.roomColumn.table2Text19"),
        },
      ];
    },

    // 跳转类型 0请选择类型 1H5 2帖子 3话题 默认选0
    getJumpType() {
      return [
        // {
        //   value: 0,
        //   label: this.$i18n.t('views.roomColumn.table1Text48'),
        // },
        {
          value: 1,
          label: this.$i18n.t("views.systemMessage.table1Text12"),
        },
        {
          value: 2,
          label: this.$i18n.t("views.roomColumn.table1Text55"),
        },
        // {
        //   value: 3,
        //   label: this.$i18n.t("views.roomColumn.table2Text12"),
        // },
        {
          value: 3,
          label: this.$i18n.t("views.systemMessage.table1Text13"),
        },
        {
          value: 4,
          label: this.$i18n.t("views.systemMessage.table1Text14"),
        },
      ];
    },
    getInnerType(type) {
      // 内图跳转类型：1-url2-房间3-帖子4-话题
      let text = "";
      let list = [
        {
          value: 1,
          label: this.$i18n.t("views.systemMessage.table1Text12"),
        },
        {
          value: 2,
          label: this.$i18n.t("views.roomColumn.table1Text55"),
        },
        // {
        //   value: 3,
        //   label: this.$i18n.t('views.roomColumn.table2Text12'),
        // },
        {
          value: 3,
          label: this.$i18n.t("views.systemMessage.table1Text13"),
        },
        {
          value: 4,
          label: this.$i18n.t("views.systemMessage.table1Text14"),
        },
      ];
      list.forEach((item) => {
        if (item.value == type) {
          text = item.label;
        }
      });
      if (type) {
        return text;
      } else {
        return list;
      }
    },

    set_endTime(date) {
      this.end_time = date;
    },
    set_startTime(date) {
      this.start_time = date;
    },
    set_starDayTime(date) {
      this.start_day_time = date;
    },
    set_endDayTime(date) {
      this.end_day_time = date;
    },
    // 转换时间
    timestampToTime(data) {
      return until.timestampToTime(data);
    },
    doperform() {
      this.operation(
        this.saveparameter[0],
        this.saveparameter[1],
        this.saveparameter[2]
      );
    },
    // 确认操作
    operation(caseNo, type, id) {
      if (until.moreTime()) {
        switch (caseNo) {
          case 1:
            this.isAbled = false;
            break;
          case 2:
            this.isfamily = false;
            break;
          case 3:
            this.iswealth = false;
            break;
          case 4:
            this.ischarm = false;
            break;
        }
      } else {
        this.showPassword = true;
        this.saveparameter = [caseNo, type, id];
      }
    },
    setDate(date) {
      this.background_time = date;
    },
    getCountryList() {
      return [
        {
          value: 0,
          text: this.$i18n.t("views.languageText.areaText1"),
        },
        {
          value: 1,
          text: this.$i18n.t("views.languageText.areaText2"),
        },
        {
          value: 3,
          text: this.$i18n.t("views.languageText.areaText4"),
        },
        {
          value: 4,
          text: this.$i18n.t("views.languageText.areaText5"),
        },
        {
          value: 5,
          text: this.$i18n.t("views.languageText.areaText6"),
        },
        {
          value: 6,
          text: this.$i18n.t("views.languageText.areaText7"),
        },
        {
          value: 9,
          text: this.$i18n.t("views.languageText.areaText8"),
        },
        {
          value: 10,
          text: this.$i18n.t("views.languageText.areaText3"),
        },
        {
          value: 11,
          text: this.$i18n.t("views.languageText.areaText9"),
        },
      ];
    },
    queryDate() {
      this.$http
        .roomBannerApplicationInfo(
          {
            apply_id: this.itemData.id,
          },
          {
            method: this.queryDate,
            that: this,
          }
        )
        .then((res) => {
          if (Number(res.status) == 200) {
            this.country = res.data.country;

            res.data = res.data || {};
            for (let key in this.detail) {
              [key] = res.data[key] || "";
            }
            this.detail.start_time =
              this.timestampToTime(res.data.start_time) + "";
          } else {
            this.$Message.warning(res.msg);
          }
        });
    },
    /*
        dayTime 是 xx:xx:xx的格式
      */
    handleDayTime(dayTime) {
      const timestampToTime = until.timestampToTime(
        parseInt(until.getObjDate() / 1000),
        false,
        true
      );
      return until.getObjDate(
        `${timestampToTime.Y}/${timestampToTime.M}/${timestampToTime.D} ${dayTime}`
      );
    },
    bannerApplicationSave(type) {
      const params = Object.assign({}, this.detail);
      params.start_time = until.getTimestamp(this.start_time);
      params.end_time = until.getTimestamp(this.end_time);
      params.end_day_time = this.end_day_time;
      params.start_day_time = this.start_day_time;
      params.country_ids = JSON.stringify(this.country_ids);

      if (this.itemData.id) {
        params.id = this.itemData.id;
      }
      if (type == "newAdd") {
        delete params.id;
      }
      this.$http
        .hurdleSave(params, {
          method: this.bannerApplicationSave,
          that: this,
        })
        .then((res) => {
          if (Number(res.status) == 200) {
            this.changeGiving();
            if (type != "newAdd") {
              this.modal1 = false;
            }
          } else {
            this.$Message.error(res.msg);
          }
        });
    },
    // 上传图片

    uploadImg(e) {
      let file = e.target.files[0];
      let param = new FormData(); //创建form对象
      param.append("image", file, file.name);
      this.$http
        .upload(param)
        .then((res) => {
          if (Number(res.status) == 200) {
            switch (this.sure_index) {
              case 1:
                this.$set(this.detail, "avatar", res.data["address:"]);
                break;
              case 2:
                this.$set(this.detail, "avatar_inner", res.data["address:"]);
                break;
            }
          } else {
            this.$Message.error(res.msg);
          }
          e.target.value = "";
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  watch: {
    value(val) {
      this.modal1 = val;
    },
    modal1(val) {
      this.$emit("input", val);
    },
  },
};
</script>
<style scoped lang="scss">
@function r($px) {
  @return $px/100 * 1rem;
}
</style>
